<template>
    <view :data-theme="globPrimary">
        <u-navbar title="确认订单"></u-navbar>
        <mescroll-body
            ref="mescrollRef"
            :height="mescrollHeight"
            @init="mescrollInit"
            @down="downCallback"
            @up="getOrderSection"
        >
            <view
                class="section-wrapper u-flex u-col-top"
                v-if="!$u.test.empty(sectionData)"
            >
                <u-image
                    width="64rpx"
                    height="32rpx"
                    :src="`/pageCourse/static/images/${
                        staticuTagImgType[sectionData.data_type]
                    }`"
                    v-if="sectionData.course_type == 1"
                ></u-image>
                <view class="content">
                    <view class="title u-line-1">{{ sectionData.title }}</view>
                    <view class="u-flex">
                        <view class="price">{{
                            sectionData.user_price | formatCurrency
                        }}</view>
                        <view class="count" v-if="sectionData.term_time == 0"
                            >永久有效</view
                        >
                        <view
                            class="count"
                            v-if="
                                sectionData.term_time < 10000 &&
                                sectionData.term_time != 0
                            "
                            >购买之日起<label style="color: #f54030">{{
                                sectionData.term_time
                            }}</label
                            >天内有效</view
                        >
                        <view
                            class="count"
                            v-if="sectionData.term_time >= 10000"
                            >{{
                                sectionData.term_time | handleTime
                            }}前有效</view
                        >
                    </view>
                </view>
            </view>

            <template v-if="!$u.test.empty(sectionData)">
                <u-cell-group
                    :border="false"
                    class="order-coupon"
                    v-if="!$u.test.empty(sectionData.credit_arr)"
                >
                    <u-cell-item
                        title="积分"
                        :value="text2"
                        :border-bottom="false"
                        hover-class="none"
                        :value-style="{
                            color: isCredit == 0 ? '' : '#FF8A52',
                        }"
                        @click="openCoupon2"
                    ></u-cell-item>
                </u-cell-group>
            </template>
        </mescroll-body>

        <view class="u-flex bottom-navbar">
            <view class="total">
                合计：
                <text class="num">{{ sumPrice | formatCurrency }}</text>
            </view>
            <edu-button
                type="primary"
                shape="circle"
                size="medium"
                @click="submit"
                >提交订单</edu-button
            >
        </view>

        <!-- 积分弹窗 -->
        <u-popup
            v-model="couponPopup2"
            mode="bottom"
            border-radius="34"
            height="723"
        >
            <view class="coin">
                <view class="coin-title">积分抵扣</view>
                <scroll-view
                    scroll-y="true"
                    class="scrollY"
                    style="height: 500rpx; width: 100%"
                >
                    <u-radio-group
                        v-model="paywayRadio"
                        size="44"
                        style="width: 100%"
                    >
                        <view
                            class="radio-item"
                            v-for="(item, index) in credit_arr"
                            :key="index"
                        >
                            <view class="radio_li">
                                <view
                                    class="left-ltem addClass"
                                    v-if="index == 0"
                                    >可使用积分 {{ item.credit }}</view
                                >
                                <view class="left-ltem" v-else
                                    >{{ item.credit }}积分</view
                                >
                                <view
                                    class="right-item"
                                    @click="change(item, item.num, index)"
                                >
                                    <view class="can-num"
                                        >可抵￥{{ item.num }}</view
                                    >
                                    <u-radio
                                        :name="index"
                                        :active-color="globPrimaryColor"
                                    ></u-radio>
                                </view>
                            </view>
                        </view>
                    </u-radio-group>
                </scroll-view>
                <view class="sure" @click="sureClick()">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin],
    data() {
        return {
            staticuTagImgType: {
                1: "contents_icon_video.png",
                2: "contents_icon_vioce.png",
                3: "img&text_icon.png",
                4: "ebook_icon_word.png",
            },
            sectionData: {},
            sumPrice: 0,
            couponPopup2: false,
            paywayRadio: 0,

            option: {},
            isCredit: 1,
            credit_num: 0,

            credit_arr: [],
            credit_redeem: 1,
            credit_redeem_percent: 1,
            str_credit: "{}",

            save_item: {},
            save_index: "",
            new_name: 0,
            isSure: 0,
        };
    },
    onLoad(option) {
        this.option = option;
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
            globWindowHeight: "projectSetting/globWindowHeight",
            globNavbarHeight: "projectSetting/globNavbarHeight",
            globStatusBarHeight: "projectSetting/globStatusBarHeight",
        }),
        mescrollHeight() {
            let height =
                this.globWindowHeight -
                this.globNavbarHeight -
                this.globStatusBarHeight -
                50;
            return `${height}px`;
        },
        text2() {
            if (this.isCredit == 0) {
                return "可抵扣￥0";
            } else {
                return `可抵扣￥${this.credit_num}`;
            }
        },
    },
    filters: {
        handleTime(timeStamp) {
            if (timeStamp > 0) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? "0" + m : m;
                var d = date.getDate();
                d = d < 10 ? "0" + d : d;
                var h = date.getHours();
                h = h < 10 ? "0" + h : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? "0" + minute : minute;
                second = second < 10 ? "0" + second : second;
                return y + "年" + m + "月" + d + "日";
            } else {
                return "";
            }
        },
    },
    methods: {
        openCoupon2() {
            this.couponPopup2 = true;
            this.paywayRadio = this.save_index;
        },
        // 选择积分
        change(item, name, index) {
            if (item.isChose) {
                this.paywayRadio = null;
                this.credit_arr.forEach((el) => (el.isChose = false));
                this.isSure = -1;
            } else {
                this.paywayRadio = index;
                this.credit_arr.forEach((el, key) =>
                    index == key ? (el.isChose = true) : (el.isChose = false)
                );
                this.new_name = name;
                this.isSure = 1;
            }
            this.save_item = item;
        },
        sureClick() {
            this.sumPrice = this.sectionData.user_price;
            if (this.isSure == -1) {
                this.credit_num = 0;
                this.sumPrice = this.sumPrice;
                this.isCredit = 0;
                this.str_credit = "{}";
                this.couponPopup2 = false;
                this.save_index = null;
            } else if (this.isSure == 1) {
                this.str_credit = JSON.stringify(this.save_item);
                this.isCredit = 1;
                this.credit_num = this.new_name;
                this.sumPrice = this.sumPrice - this.new_name;
                this.couponPopup2 = false;
                this.credit_arr.forEach((el, key) => {
                    if (this.save_item.num == el.num) {
                        this.save_index = key;
                    }
                });
            } else {
                this.isSure == 0;
            }
            {
                this.couponPopup2 = false;
            }
        },
        // 获取订单信息
        getOrderSection() {
            this.$edu.api
                .getOrderSection({
                    section_id: this.option.id,
                })
                .then((res) => {
                    const { data } = res;
                    this.sectionData = data;
                    this.credit_arr = data.credit_arr;
                    this.credit_arr.map((el, key) =>
                        key == 0 ? (el.isChose = true) : (el.isChose = false)
                    );
                    if (data.credit_arr.length != 0) {
                        this.credit_num = data.credit_arr[0].num;
                        this.sumPrice = data.user_price - this.credit_num;
                        this.str_credit = JSON.stringify(data.credit_arr[0]);
                    } else {
                        this.sumPrice = data.user_price;
                    }
                    this.mescroll.endSuccess(1);
                });
        },
        // 提交订单
        submit() {
            this.$edu.api
                .postOrderSection({
                    section_id: this.sectionData.id,
                    credit: this.str_credit,
                })
                .then((res) => {
                    console.log(res);
                    if (res.data.need_pay == 0) {
                        this.$u.route({
                            type: "redirectTo",
                            url: "/pageCourse/course/details",
                            params: {
                                id: this.sectionData.course_id,
                            },
                        });
                    } else if (res.data.need_pay == 1) {
                        let params = {
                            id: this.sectionData.course_id,
                            no: res.data.order_no,
                            payment: res.data.payment,
                            redirect_type: "course",
                        };
                        this.$u.route({
                            type: "redirectTo",
                            url: "pages/pay",
                            params: params,
                        });
                    }
                })
                .catch((res) => {
                    this.$u.toast(res.msg);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .section-wrapper {
    margin-top: 20rpx;
    padding: 26rpx 30rpx 34rpx;
    background-color: #fff;
    .u-image {
        margin-top: 7rpx;
    }
    .content {
        flex: 1;
        max-width: 600rpx;
        margin-left: 24rpx;
        .title {
            font-size: 28rpx;
            font-weight: 400;
            color: $edu-main-color;
            margin-bottom: 30rpx;
        }
        .count {
            font-size: 22rpx;
            font-weight: 400;
            color: $edu-tips-color;
            margin-left: auto;
        }
        .price {
            font-size: 26rpx;
            font-weight: 500;
            color: $edu-price-color;
        }
    }
}

::v-deep .order-coupon {
    margin-top: 22rpx;
}

.bottom-navbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    height: 98rpx;
    padding: 0 30rpx;
    background: #ffffff;
    box-shadow: 0px 2rpx 14rpx 0px rgba(0, 0, 0, 0.06);
    .total {
        flex: 1;
        font-size: 26rpx;
        font-weight: 400;
        color: #303133;
        .num {
            font-size: 30rpx;
            font-weight: 500;
            color: #f54030;
        }
    }
}

.coin {
    padding: 30rpx 30rpx 10rpx 30rpx;
    .coin-title {
        height: 45rpx;
        line-height: 45rpx;
        text-align: center;
        font-size: 32rpx;
        color: #303133;
        font-weight: bold;
        margin-bottom: 44rpx;
    }
    .sure {
        height: 72rpx;
        width: 640rpx;
        @include bg-color();
        font-size: 32rpx;
        line-height: 72rpx;
        text-align: center;
        margin: 0 auto;
        color: #ffffff;
        border-radius: 36rpx;
    }
    .radio-item {
        height: auto;
        width: 100%;
        margin-bottom: 56rpx;
        .radio_li {
            display: flex;
            justify-content: space-between;
            .left-ltem {
                height: 44rpx;
                line-height: 44rpx;
                font-size: 30rpx;
                color: #303133;
            }
            .right-item {
                height: 44rpx;
                line-height: 44rpx;
                display: flex;
                .can-num {
                    font-size: 26rpx;
                    color: #909399;
                    margin-right: 23rpx;
                }
            }
        }
    }
}
.addClass {
    font-weight: bold;
}
</style>
